<template>
  <div>
    <div id="part_one">
      <span> 省：</span>
      <el-autocomplete class="inline-input"
                       v-model="state1"
                       :fetch-suggestions="querySearch"
                       placeholder="全部省份"
                       suffix-icon="el-icon-arrow-down"
                       @select="handleSelect"></el-autocomplete>
      <el-autocomplete class="inline-input"
                       v-model="state1"
                       :fetch-suggestions="querySearch"
                       placeholder="全部市"
                       :disabled="true"
                       suffix-icon="el-icon-arrow-down"
                       @select="handleSelect"></el-autocomplete>
    </div>
    <div id="part_two">
      <div class="container">
        <span>按年：</span>
        <el-date-picker v-model="value3"
                        type="year"
                        placeholder="选择年"
                        style="width:150px;margin-right:100px">
        </el-date-picker>
      </div>
      <div class="container">
        <span>按月份：</span>
        <el-date-picker v-model="value2"
                        type="month"
                        placeholder="选择月"
                        style="width:150px">
        </el-date-picker>
      </div>
    </div>
    <div id="part_three">
      销量排序：
      <el-radio-group v-model="radio">
        <el-radio :label="3" checked>全部</el-radio>
        <el-radio :label="6">降序</el-radio>
        <el-radio :label="9">升序</el-radio>
      </el-radio-group>
    </div>
    <el-table :data="tableData"
              height="250"
              border
              style="width: 100%">
      <el-table-column prop="date"
                       label="省"
                       width="180">
      </el-table-column>
      <el-table-column prop="name"
                       label="市"
                       width="180">
      </el-table-column>
      <el-table-column prop="address"
                       label="总活跃度">
      </el-table-column>
    </el-table>
  </div>
</template>
<style scoped>
  .inline-input {
    width: 181px;
  }

  #part_one {
    margin:30px;
  }

  #part_two {
    display: flex;
    align-items: center;
    margin: 30px 0 0 30px;
  }

  #part_three {
    margin: 30px;
  }
  .el-dropdown {
    vertical-align: top;
  }
  .el-dropdown + .el-dropdown {
    margin-left: 15px;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }
</style>
<script>
  export default {
    data() {
      return {
        radio: '1',
        tableData: [{
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-08',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-06',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-07',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }],
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          },
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          }, {
            text: '一周前',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
          }]
        },
        value1: '',
        value2: '',
      };
    },
      methods: {
      handleClick() {
        alert('button click');
      }
    }
  };
</script>
